<template>
  <div class="app-container">
    <div ref="filter" class="filter-container" style="margin-bottom: unset">
      <template>
        <el-input
          v-model="listQuery.mobile"
          size="small"
          :placeholder="$t('common.enter', [$t('customer.customerPhone')])"
          style="width: 200px; margin-left: 5px"
          class="filter-item filter-left"
          clearable
        />
        <el-select
          v-model="listQuery.status"
          class="filter-left"
          :placeholder="$t('common.select', [$t('customer.customerStatus')])"
          clearable
          filterable
          size="small"
        >
          <el-option
            v-for="item in statusOption"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="listQuery.type"
          class="filter-left"
          :placeholder="$t('common.select', [$t('customer.customerType')])"
          clearable
          filterable
          size="small"
        >
          <el-option
            v-for="item in typeOption"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!--        <el-date-picker-->
        <!--          v-model="listQuery.addTime"-->
        <!--          type="datetimerange"-->
        <!--          size="small"-->
        <!--          range-separator="至"-->
        <!--          start-placeholder="开始日期"-->
        <!--          end-placeholder="结束日期">-->
        <!--        </el-date-picker>-->
        <el-button
          size="small"
          class="filter-item filter-left"
          icon="el-icon-search"
          type="primary"
          style="margin-left: 5px"
          plain
          @click="search()"
        >
          {{ $t('common.search') }}
        </el-button>
        <el-button
          size="small"
          class="filter-item right filter-left filter-refresh"
          icon="el-icon-refresh"
          type="primary"
          plain
          @click="refresh()"
        />
      </template>
    </div>
    <div ref="filter" class="filter-container">
      <el-button
        size="small"
        class="filter-item left"
        type="primary"
        icon="el-icon-plus"
        style="margin-left: 5px"
        @click="addRow()"
        v-if="isMy || isIntention"
      >
        {{ $t('customer.addCustomer') }}
      </el-button>
      <el-button
        size="small"
        class="filter-item left"
        type="warning"
        style="margin-left: 5px"
        icon="el-icon-s-grid"
        @click="setCustomerGroupCollect"
        v-if="isMy || isIntention"
      >
        {{ $t('customer.setGroup') }}
      </el-button>
      <el-button
        size="small"
        class="filter-item left"
        type="danger"
        style="margin-left: 5px"
        icon="el-icon-price-tag"
        @click="setCustomerLabelCollect"
        v-if="isMy || isIntention"
      >
        {{ $t('customer.setupTag') }}
      </el-button>
      <el-button
        size="small"
        class="filter-item left"
        type="info"
        style="margin-left: 5px"
        icon="el-icon-paperclip"
        @click="setCustomerSourceCollect"
        v-if="isMy || isIntention"
      >
        {{ $t('customer.setupSource') }}
      </el-button>
      <el-button
        size="small"
        class="filter-item left"
        type="success"
        style="margin-left: 5px"
        icon="el-icon-success"
        @click="setCustomerDealStatusCollect"
        v-if="isMy || isIntention"
      >
        {{ $t('customer.batchUpdateDealState') }}
      </el-button>
      <el-button
        size="small"
        class="filter-item left"
        type="warning"
        style="margin-left: 5px"
        icon="el-icon-star-on"
        @click="setCustomerIntentionCollect"
        v-if="isMy || isIntention"
      >
        {{ $t('customer.batchUpdateIntentState') }}
      </el-button>
      <el-button
        size="small"
        class="filter-item left"
        style="margin-left: 5px"
        icon="el-icon-s-unfold"
        @click="setCustomerIsPrivateCollect(0)"
        v-if="isMy || isIntention"
      >
        {{ $t('customer.batchMoveToPublic') }}
      </el-button>
      <el-button
        size="small"
        class="filter-item left"
        style="margin-left: 5px"
        type="warning"
        icon="el-icon-upload2"
        @click="importCustomer()"
        v-if="isMy"
      >
        {{ $t('common.import') }}
      </el-button>
      <el-button
        size="small"
        class="filter-item left"
        style="margin-left: 5px"
        type="warning"
        icon="el-icon-download"
        @click="openExportCustomer()"
        v-if="isMy"
      >
        {{ $t('common.export') }}
      </el-button>
      <el-button
        size="small"
        class="filter-item left"
        style="margin-left: 5px"
        icon="el-icon-s-fold"
        @click="setCustomerIsPrivateCollect(1)"
        v-if="isWater"
      >
        {{ $t('customer.batchClaimCustomer') }}
      </el-button>
    </div>
    <!---->
    <el-dialog
      :title="$t('customer.exportCustomer')"
      :visible.sync="exportCustomerState"
      width="425px"
    >
      <div class="form-scrollbar" style="height: 150px">
        <div style="line-height: 150px">
          <el-radio-group v-model="exportMode">
            <el-radio :label="1">{{
              $t('customer.exportCheckedCustomer')
            }}</el-radio>
            <el-radio :label="2">{{
              $t('customer.exportBySearchCondition')
            }}</el-radio>
            <el-radio :label="3">{{ $t('customer.exportAll') }}</el-radio>
          </el-radio-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="exportCustomerState = false">{{
          $t('common.cancel')
        }}</el-button>
        <el-button type="primary" @click="exportCustomer">{{
          $t('common.confirm')
        }}</el-button>
      </span>
    </el-dialog>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      fit
      border
      size="medium"
      :height="tableHeight"
      :header-cell-style="{ background: '#F2F6FC' }"
      @selection-change="handleSelection"
      class="customer"
    >
      <el-table-column type="selection" align="center"> </el-table-column>
      <el-table-column
        align="center"
        :label="$t('common.id')"
        width="60"
        type="index"
      >
      </el-table-column>

      <!-- 公海 -->
      <template v-if="isWater">
        <el-table-column
          align="center"
          :label="$t('customer.customerName')"
          prop="name"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('customer.office')"
          prop="jobTitle"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('customer.phone')"
          prop="mobile"
        />
        <el-table-column
          align="center"
          :label="$t('common.email')"
          prop="email"
        />
        <el-table-column
          align="center"
          :label="$t('common.remark')"
          prop="remarks"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('customer.latestFollowUp')"
          prop="followMessage"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="$t('customer.latestUser')"
          prop="belongUserId"
        >
          <template slot-scope="{ row }">
            {{ row.belongUser.trueName }}
          </template>
        </el-table-column>
      </template>
      <!-- 我的客户 -->
      <template v-if="isMy || isIntention">
        <el-table-column
          align="center"
          :label="$t('common.type')"
          width="80"
          prop="type"
          show-overflow-tooltip
        >
          <el-table-column
            align="center"
            :label="$t('common.source')"
            width="80"
            prop="sourceId"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <template v-if="row.type == 1">{{
                $t('route.dataSearch')
              }}</template>
              <template v-else-if="row.type == 2">{{
                $t('customer.dataMarketing')
              }}</template>
              <template v-else>{{ $t('route.dataSearch') }}</template>
              <el-divider></el-divider>
              {{ row.sourceId ? row.source.name : $t('common.empty') }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('common.grouping')"
          width="80"
          prop="groupId"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            {{ row.groupId ? row.group.name : $t('customer.notGrouping') }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('common.tag')"
          width="80"
          type="index"
        >
          <template slot-scope="{ row }">
            <template v-if="row.labels">
              <template v-for="(v, k) in row.labels" style="margin-bottom: 2px">
                <el-tag
                  :style="{
                    'background-color': v.color,
                    'border-color': v.color,
                  }"
                  size="mini"
                  effect="dark"
                >
                  {{ v.name }}
                </el-tag>
              </template>
            </template>
            <template v-else>{{ $t('common.empty') }}</template>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('customer.customerName')"
          prop="name"
          width="100"
          show-overflow-tooltip
        >
          <el-table-column
            align="center"
            label="$t('customer.office')"
            prop="jobTitle"
            width="200"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <el-link type="primary" @click="infoRow(row.id)">{{
                row.name
              }}</el-link>
              <el-divider></el-divider>
              {{ row.jobTitle ? row.jobTitle : $t('common.empty') }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('customer.phone')"
          prop="mobile"
          width="200"
        >
          <el-table-column
            align="center"
            :label="$t('common.email')"
            prop="email"
            width="200"
          >
            <template slot-scope="{ row }">
              {{ row.mobile }}
              <el-divider></el-divider>
              {{ row.email }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('customer.dealState')"
          prop="dealStatus"
          width="200"
        >
          <el-table-column
            align="center"
            :label="$t('customer.attention')"
            prop="attention"
            width="200"
          >
            <el-table-column
              align="center"
              :label="$t('common.remark')"
              width="200"
              prop="remarks"
              show-overflow-tooltip
            >
              <template slot-scope="{ row }">
                <template v-if="row.dealStatus == 1">
                  <i class="el-icon-success" style="color: #20b559"></i
                  >{{ $t('customer.dealed') }}
                </template>
                <template v-else>
                  <i class="el-icon-error" style="color: #f95a5a"></i
                  >{{ $t('customer.notDeal') }}
                </template>
                <el-divider></el-divider>
                <el-rate
                  v-model="row.attention"
                  @change="setCustomerAttention(row.id, row.attention)"
                  :colors="colors"
                >
                </el-rate>
                <el-divider></el-divider>
                {{ row.remarks ? row.remarks : $t('common.empty') }}
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('customer.principal')"
          prop="belongUserId"
          width="200"
          show-overflow-tooltip
        >
          <el-table-column
            align="center"
            :label="$t('customer.founder')"
            prop="userId"
            width="200"
            show-overflow-tooltip
          >
            <el-table-column
              align="center"
              :label="$t('customer.latestFollowUpTime')"
              prop="followAt"
              width="200"
              show-overflow-tooltip
            >
              <template slot-scope="{ row }">
                {{ row.belongUser.trueName }}
                <el-divider></el-divider>
                {{ row.user.trueName }}
                <el-divider></el-divider>
                {{ row.followAt ? row.followAt : $t('common.empty') }}
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('customer.customerGetedTime')"
          prop="belongUserId"
          show-overflow-tooltip
        >
          <el-table-column
            align="center"
            :label="$t('common.createTime')"
            prop="belongAt"
            show-overflow-tooltip
          >
            <el-table-column
              align="center"
              :label="$t('customer.latestFollowUp')"
              prop="followMessage"
              show-overflow-tooltip
            >
              <template slot-scope="{ row }">
                {{ row.belongAt }}
                <el-divider></el-divider>
                {{ row.createdAt }}
                <el-divider></el-divider>
                {{ row.followMessage ? row.followMessage : $t('common.empty') }}
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('common.updateTime')"
          prop="updatedAt"
          width="150"
        />
      </template>
      <el-table-column align="center" :label="$t('common.actions')" width="240">
        <template slot-scope="{ row }">
          <template v-if="isMy || isIntention">
            <el-button-group style="margin-bottom: 5px">
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('customer.editCustomer')"
                placement="top-start"
              >
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  @click="editRow(row.id)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('customer.setGroup')"
                placement="top-start"
              >
                <el-button
                  type="warning"
                  size="mini"
                  icon="el-icon-s-grid"
                  @click="setCustomerGroup(row.id)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('customer.setupSource')"
                placement="top-start"
              >
                <el-button
                  type="info"
                  size="mini"
                  icon="el-icon-paperclip"
                  @click="setCustomerSource(row.id)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('customer.setupTag')"
                placement="top-start"
              >
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-price-tag"
                  @click="setCustomerLabel(row.id)"
                />
              </el-tooltip>
            </el-button-group>
            <el-button-group>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('customer.updateDealState')"
                placement="top-start"
              >
                <el-button
                  type="success"
                  size="mini"
                  icon="el-icon-success"
                  @click="setCustomerDealStatus(row.id)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('customer.updateIntentState')"
                placement="top-start"
              >
                <el-button
                  size="mini"
                  type="warning"
                  icon="el-icon-star-on"
                  @click="setCustomerIntention(row.id)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('customer.followUpLog')"
                placement="top-start"
              >
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-chat-dot-round"
                  @click="customerFollow(row.id)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('customer.operationLog')"
                placement="top-start"
              >
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-chat-line-square"
                  @click="customerLog(row.id)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('customer.moveToPublic')"
                placement="top-start"
              >
                <el-button
                  size="mini"
                  icon="el-icon-s-unfold"
                  @click="setCustomerIsPrivate(row.id, 0)"
                />
              </el-tooltip>
            </el-button-group>
          </template>
          <template v-if="isWater">
            <el-button-group>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('customer.claimCustomer')"
                placement="top-start"
              >
                <el-button
                  size="mini"
                  icon="el-icon-s-fold"
                  @click="setCustomerIsPrivate(row.id, 1)"
                />
              </el-tooltip>
            </el-button-group>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />
    <Group :id="collectId" :show.sync="showGroupState" @closeAction="refresh" />
    <ChangeDealStatus
      :id="collectId"
      :show.sync="showDealState"
      @closeAction="refresh"
    />
    <Intention
      :id="collectId"
      :show.sync="showIntentionState"
      @closeAction="refresh"
    />
    <Label :id="collectId" :show.sync="showLabelState" @closeAction="refresh" />
    <Source
      :id="collectId"
      :show.sync="showSourceState"
      @closeAction="refresh"
    />
    <Edit :id="id" :show.sync="showState" @closeAction="refresh" />
    <Drawer :id="id" :show.sync="showInfoState" @closeAction="refresh" />
    <DialogFollow
      :id="id"
      :show.sync="showFollowState"
      @closeAction="refresh"
    />
    <DialogLog :id="id" :show.sync="showLogState" @closeAction="refresh" />
  </div>
</template>

<script>
import {
  getCustomerIds,
  getCustomerAllIds,
  getList,
  setAttention,
  SetIsPrivate,
} from '@/api/customer/index'
import Pagination from '@/components/Pagination'
import Group from '@/views/customer/common/group'
import Label from '@/views/customer/common/label'
import Source from '@/views/customer/common/source'
import ChangeDealStatus from '@/views/customer/common/changeDealStatus'
import Intention from '@/views/customer/common/intention'
import Edit from './edit'
import Drawer from './drawer'
import DialogFollow from './dialogFollow'
import DialogLog from './dialogLog'

export default {
  name: 'CustomerIndex',
  components: {
    Pagination,
    Group,
    Edit,
    Drawer,
    ChangeDealStatus,
    Label,
    Intention,
    Source,
    DialogFollow,
    DialogLog,
  },
  props: {
    action: {
      type: String,
    },
  },
  created() {
    this.checkTab()
  },
  destroyed() {
    VUE.$off('importCallBack')
  },
  data() {
    return {
      exportMode: 1,
      exportCustomerState: false,
      isMy: false,
      isIntention: false,
      isWater: false,
      collectId: '',
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      clientHeight: document.documentElement.clientHeight,
      clientWidth: document.documentElement.clientWidth,
      listLoading: false,
      tableHeight: 'calc(100vh - 240px)',
      list: [],
      selection: [],
      showGroupState: false,
      showDealState: false,
      showLabelState: false,
      showIntentionState: false,
      showSourceState: false,
      showFollowState: false,
      showLogState: false,
      showState: false,
      showInfoState: false,
      id: '',
      total: 0,
      listQuery: {
        status: '',
        type: '',
        addTime: '',
        limit: 20,
        action: -1,
      },
      statusOption: [
        { label: this.$t('customer.notDeal'), value: 0 },
        { label: this.$t('customer.dealed'), value: 1 },
        { label: this.$t('customer.followedUp'), value: 2 },
        { label: this.$t('customer.notFollowed'), value: 3 },
      ],
      typeOption: [
        { label: this.$t('route.dataSearch'), value: 1 },
        { label: this.$t('customer.dataMarketing'), value: 2 },
        { label: this.$t('customer.externalImport'), value: 3 },
      ],
    }
  },
  mounted() {
    this.fetchData()
    window.onresize = () => {
      this.clientHeight = document.documentElement.clientHeight
      this.clientWidth = document.documentElement.clientWidth
    }
  },

  methods: {
    checkTab() {
      //初始化
      this.isMy = false
      this.isIntention = false
      this.isWater = false

      if (this.action === 'my') {
        this.isMy = true
        this.listQuery.action = 1
      } //我的客户
      if (this.action === 'intention') {
        this.isIntention = true
        this.listQuery.action = 2
      } //意向客户
      if (this.action === 'water') {
        this.isWater = true
        this.listQuery.action = 3
      } //
    },
    async fetchData() {
      this.listLoading = true

      let listQuery = JSON.parse(JSON.stringify(this.listQuery))
      if (listQuery.status === '') {
        listQuery.status = -1
      }
      const { data } = await getList(listQuery, listQuery.page, listQuery.limit)
      this.list = data.items
      this.total = data.total
      if (this.total && this.isMy) {
        this.setTableHeight(315)
      } else if (this.isMy) {
        this.setTableHeight(275)
      }
      if (this.total && (this.isIntention || this.isWater)) {
        this.setTableHeight(283)
      } else if (this.isIntention || this.isWater) {
        this.setTableHeight(242)
      }
      setTimeout(() => {
        this.listLoading = false
      }, 0.5 * 1000)
    },
    setCustomerLabel(id) {
      this.collectId = id
      this.showLabelState = true
    },
    setCustomerSourceCollect() {
      if (this.selection.length <= 0) {
        this.$message({
          type: 'info',
          message: this.$t('customer.checkCustomerNeedToSetSource'),
        })
        return false
      }
      let ids = []
      for (let i in this.selection) {
        ids.push(this.selection[i].id)
      }
      this.collectId = ids
      this.showSourceState = true
    },
    setCustomerSource(id) {
      this.collectId = id
      this.showSourceState = true
    },
    setCustomerLabelCollect() {
      if (this.selection.length <= 0) {
        this.$message({
          type: 'info',
          message: this.$t('customer.checkCustomerNeedToSetTag'),
        })
        return false
      }
      let ids = []
      for (let i in this.selection) {
        ids.push(this.selection[i].id)
      }
      this.collectId = ids
      this.showLabelState = true
    },
    setCustomerGroupCollect() {
      if (this.selection.length <= 0) {
        this.$message({
          type: 'info',
          message: this.$t('customer.checkCustomerNeedToSetGroup'),
        })
        return false
      }
      let ids = []
      for (let i in this.selection) {
        ids.push(this.selection[i].id)
      }
      this.collectId = ids
      this.showGroupState = true
    },
    setCustomerGroup(id) {
      this.collectId = id
      this.showGroupState = true
    },
    setCustomerDealStatusCollect() {
      if (this.selection.length <= 0) {
        this.$message({
          type: 'info',
          message: this.$t('customer.checkBatchUpdateDealState'),
        })
        return false
      }
      let ids = []
      for (let i in this.selection) {
        ids.push(this.selection[i].id)
      }
      this.collectId = ids
      this.showDealState = true
    },
    setCustomerDealStatus(id) {
      this.collectId = id
      this.showDealState = true
    },
    setCustomerIsPrivateRes(val = 0) {
      let msg = ''
      let title = ''
      if (val == 0) {
        title = this.$t('customer.moveTo')
        msg = this.$t('customer.confirmMoveToPublic')
        if (typeof this.id != 'object') {
          msg = this.$t('customer.confirmMoveCustomerToPublic')
        }
      } else {
        title = this.$t('customer.claim')
        msg = this.$t('customer.confirmClaimCurrentCustomer')
        if (typeof this.id != 'object') {
          msg = this.$t('customer.confirmClaimCustomer')
        }
      }

      this.$confirm(msg, this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning',
      }).then(async () => {
        let data = { ids: this.collectId, value: val }

        if (typeof data.ids != 'object') {
          data.ids = [data.ids]
        }
        await SetIsPrivate(data).then((res) => {
          this.$notify({
            title: this.$t('common.success'),
            message: `${title}${this.$t('common.success')}`,
            type: 'success',
            duration: 2000,
          })
          this.fetchData()
        })
      })
    },
    setCustomerIsPrivate(id, val = 0) {
      this.collectId = id
      this.setCustomerIsPrivateRes(val)
    },
    setCustomerIsPrivateCollect(val = 0) {
      if (this.selection.length <= 0) {
        let msg = ''
        if (val == 0) {
          msg = this.$t('customer.checkCustomerNeedToBatchMoveToPublic')
        } else {
          msg = this.$t('customer.checkCustomerNeedToBatchClaim')
        }
        this.$message({
          type: 'info',
          message: msg,
        })
        return false
      }
      let ids = []
      for (let i in this.selection) {
        ids.push(this.selection[i].id)
      }
      this.collectId = ids
      this.setCustomerIsPrivateRes(val)
    },
    setCustomerIntentionCollect() {
      if (this.selection.length <= 0) {
        this.$message({
          type: 'info',
          message: this.$t('customer.checkBatchUpdateDealState'),
        })
        return false
      }
      let ids = []
      for (let i in this.selection) {
        ids.push(this.selection[i].id)
      }
      this.collectId = ids
      this.showIntentionState = true
    },
    setCustomerIntention(id) {
      this.collectId = id
      this.showIntentionState = true
    },
    refresh() {
      // 刷新重置条件
      this.listQuery = {
        status: '',
        source: '',
        addTime: '',
        action: this.listQuery.action,
      }
      this.showLogState = false
      this.showFollowState = false
      this.showIntentionState = false
      this.showGroupState = false
      this.showLabelState = false
      this.showSourceState = false
      this.showDealState = false
      this.showState = false
      this.showInfoState = false
      this.fetchData()
    },
    search() {
      this.fetchData()
    },
    setTableHeight(height) {
      this.tableHeight = 'calc(100vh - ' + height + 'px)'
    },
    setCustomerAttention(id, val) {
      this.$confirm(
        this.$t('customer.confirmUpdateCustomerAttention'),
        this.$t('common.tips'),
        {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning',
        }
      )
        .then(async () => {
          this.listLoading = true
          let data = { id: id, attention: val }
          await setAttention(data).then((res) => {
            this.$notify({
              title: this.$t('common.success'),
              message: this.$t('common.updateSuccessfully'),
              type: 'success',
              duration: 2000,
            })
            this.fetchData()
          })
        })
        .catch(() => {
          this.fetchData()
        })
    },
    handleSelection(val) {
      this.selection = val
    },
    addRow() {
      this.id = ''
      this.showState = true
    },
    editRow(id) {
      this.id = id
      this.showState = true
    },
    infoRow(id) {
      this.id = id
      this.showInfoState = true
    },
    customerFollow(id) {
      this.id = id
      this.showFollowState = true
    },
    customerLog(id) {
      this.id = id
      this.showLogState = true
    },
    importCustomer() {
      let _this = this
      this.$common.ExeInvoke(function (f) {
        f.ImportClient()
      })
      this.importCallBack()
    },
    importCallBack() {
      let _this = this
      VUE.$on('importCallBack', () => {
        _this.refresh()
      })
    },
    openExportCustomer() {
      this.exportMode = 1
      this.exportCustomerState = true
    },
    async exportCustomer() {
      let mode = this.exportMode
      switch (mode) {
        case 1:
          if (this.selection.length <= 0) {
            this.$message({
              type: 'info',
              message: this.$t('customer.checkCustomerNeedToExport'),
            })
            return false
          }
          let ids = []
          for (let i in this.selection) {
            ids.push(this.selection[i].id)
          }
          let _this = this
          this.$common.ExeInvoke(function (f) {
            f.ExportClient(ids)
            _this.exportCustomerState = false
          })
          break
        case 2:
          let listQuery = JSON.parse(JSON.stringify(this.listQuery))
          if (listQuery.status === '') {
            listQuery.status = -1
          }
          await getCustomerIds(listQuery).then((res) => {
            console.log(res)
            if (!res.data.length) {
              this.$message({
                type: 'warning',
                message: this.$t('customer.noCustomerData'),
              })
            }
            let ids = res.data
            this.$common.ExeInvoke(function (f) {
              f.ExportClient(ids)
              _this.exportCustomerState = false
            })
          })
          break
        case 3:
          let params = {}
          params['action'] = this.listQuery.action
          await getCustomerAllIds(params).then((res) => {
            if (!res.data.length) {
              this.$message({
                type: 'warning',
                message: this.$t('customer.noCustomerData'),
              })
            }
            let ids = res.data
            this.$common.ExeInvoke(function (f) {
              f.ExportClient(ids)
              _this.exportCustomerState = false
            })
          })
          break
      }
    },
  },
}
</script>

<style scoped>
/deep/ label {
  font-weight: unset;
}

.customer /deep/ .el-divider--horizontal {
  margin: 5px 0 !important;
}
</style>
